<template>
  <div class="homes">
    <homePage />
    <!-- 猜你在追 -->
    <div class="m-videoList">
      <div class="box-items">
        <h2 class="c-title-des">猜你在追</h2>
        <div class="c-link">
          全部追剧
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="items-full">
        <div class="m-pic-horizontalNew">
          <ul class="m-pic-list">
            <li v-for="(item, index) in guessarr" :key="index">
              <div class="piclist-img">
                <a href="javascript:;">
                  <img :src='item.img' alt="" />
                  <div class="c-rt">
                    <img :src='item.images1' />
                  </div>
                  <div class="c-rb">
                    <span>{{ item.text3 }}</span>
                  </div>
                </a>
              </div>
              <div class="piclist-title">
                <div class="c-title">{{ item.text1 }}</div>
                <div class="c-info">{{ item.text2 }}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 今日资讯 -->
    <div class="today">
      <div class="box-items">
        <h2 class="c-title-des">今日资讯</h2>
      </div>
      <div class="box-itemj">
        <div class="m-news-list">
          <i></i>
          重庆煤矿事故致18人遇难
        </div>
        <div class="m-news-list">
          <i></i>
          宪法公益宣传片高清版
        </div>
      </div>
    </div>
    <div class="items-full">
      <div class="m-pic-horizontalNew">
        <ul class="m-pic-list">
          <li v-for="(item, index) in todayarr1" :key="index" v-show="tode1">
            <div class="piclist-img">
              <a href="javascript:;">
                <img :src="item.img" alt="" />
                <div class="c-rt">
                  <img :src="item.images1" />
                </div>
                <div class="c-rb">
                  <span>{{ item.text3 }}</span>
                </div>
              </a>
            </div>
            <div class="piclist-title">
              <div class="c-title">{{ item.text1 }}</div>
            </div>
          </li>
        </ul>
        <ul class="m-pic-list">
          <li v-for="(item, index) in todayarr2" :key="index" v-show="today2">
            <div class="piclist-img">
              <a href="javascript:;">
                <img :src="item.img" alt="" />
                <div class="c-rt">
                  <img :src="item.images1" />
                </div>
                <div class="c-rb">
                  <span>{{ item.text3 }}</span>
                </div>
              </a>
            </div>
            <div class="piclist-title">
              <div class="c-title">{{ item.text1 }}</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="barte">
        <div class="m-link"><van-icon name="play-circle-o" />更多资讯</div>
        <div class="m-link" @click="replay"><van-icon name="replay" />换一批</div>
      </div>
    </div>
  <group />
    <bottom />
  </div>
</template>

<script>
import homePage from "@/components/homePage.vue";
import group from '../components/group';
import bottom from "../components/bottom"
export default {
  // name:"homes",
  components: {
    homePage,
    group,
    bottom
  },
  data() {
      return {
        tode1: true,
        today2: false,
        new1: true,
        new2: false,
        i: -1,
          guessarr:[],
          todayarr1:[],
          todayarr2:[],
  
         
      }
  },
  methods: {
        replay() {
          if(this.tode1 == true) {
            this.today2 = true;
            this.tode1 = false;
          } else {
            this.today2 = false;
            this.tode1 = true;
          }
        },
        
      },
  mounted() {
  //   // 图片加载
    this.$axios.get("/api/guessarr").then(data => {
      var guessarr = data.data;
      guessarr.forEach(item => {
        item.img = require('../assets/' + item.img);
        item.images1 = require('../assets/' + item.images1);   
      })
      this.guessarr = guessarr;
      // console.log(this.guessarr);
    });

    this.$axios.get("/api/homestodayarr1").then(data => {
      var homestodayarr1 = data.data;
      homestodayarr1.forEach(item => {
        item.img = require('../assets/' + item.img);
        item.images1 = require('../assets/' + item.images1);   
      })
      this.todayarr1 = homestodayarr1;
      
    });

    this.$axios.get("/api/homestodayarr2").then(data => {
      var homestodayarr2 = data.data;
      homestodayarr2.forEach(item => {
        item.img = require('../assets/' + item.img);
        item.images1 = require('../assets/' + item.images1);   
      })
      this.todayarr2 = homestodayarr2;
      
    });

  }
  
  
}
</script>

<style>
/* 今日 */
.m-news-list {
  position: relative;
  margin-bottom: 0.19rem;
  padding: 0 0.12rem 0 0.24rem;
  box-sizing: border-box;
  font-size: 0.15rem;
  color: #333;
  padding-left: 0.36rem;
}
.m-news-list i {
  width: 0.09rem;
  height: 0.09rem;
  display: inline-block;
  background-image: url(../assets/img/bg.png);
  background-repeat: no-repeat;
  background-size: 3.36rem auto;
  background-position: -0.08rem -0.44rem;
  position: absolute;
  left: 0.1rem;
  top: 0.06rem;
}
/* 猜你在追 */
.m-videoList {
  width: 3.75rem;
}
.box-items {
  padding: 0.07rem 0.12rem;
  box-sizing: border-box;
  font-size: 0.15rem;
}
.c-title-des {
  font-size: 0.16rem;
  display: inline-block;
  line-height: 0.35rem;
  font-weight: bold;
}
.c-link {
  color: #666;
  font-size: 0.13rem;
  float: right;
  margin-top: 0.1rem;
}
.c-link i {
  vertical-align: sub;
}
.barte {
  display: block;
  padding: 0 0.05rem 0.2rem;
  height: 0.55rem;
}
.m-link {
  float: left;
  margin: 0 0.05rem;
  width: 47%;
  text-align: center;
  background-color: #f5f7fa;
  border-radius: 0.02rem;
  font-size: 0.15rem;
  line-height: 0.38rem;
  color: #222;
}
.m-link i {
  transform: translate(-0.09rem, 0.04rem);
  color: aqua;
  font-size: 0.18rem;
}

</style>